<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
    </div>
</template>
<script>

import simpleMap from '../../components/simpleMap';

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]

import datas from '../TestData/list'
console.log(datas);

export default {
    data() {
        return {}
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        map.flytochina();

        var viewer = map.getViewer();
        var scene = viewer.scene;

        var instances = [];
        var index = 0;

        var Colors = {
            0: Cesium.Color.WHITE.withAlpha(0.5),
            1: Cesium.Color.YELLOW.withAlpha(0.5),
            2: Cesium.Color.ORANGE.withAlpha(0.5),
            3: Cesium.Color.RED.withAlpha(0.5),
        }


        console.time('Star')
        for (let i = 0; i < datas.datas.length; i++) {
            const element = datas.datas[i];
            instances.push(new Cesium.GeometryInstance({
                geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(element.LonLeft, element.LatBottom, element.LonRight, element.LatTop)
                }),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Colors[element.colorNumber])
                }
            }));
        }
        // for (let d = 0; d < 25; d++) {
        //     for (let i = 0; i < datas.datas.length; i++) {
        //         const element = datas.datas[i];
        //         instances.push(new Cesium.GeometryInstance({
        //             geometry: new Cesium.RectangleGeometry({
        //                 rectangle: Cesium.Rectangle.fromDegrees(element.LonLeft + d * 0.5, element.LatBottom + d * 0.5, element.LonRight + d * 0.5, element.LatTop + d * 0.5)
        //             }),
        //             attributes: {
        //                 color: Cesium.ColorGeometryInstanceAttribute.fromColor(Colors[element.colorNumber])
        //             }
        //         }));
        //     }

        // }

        console.log(instances);


        scene.primitives.add(new Cesium.Primitive({
            geometryInstances: instances, //合并
            //某些外观允许每个几何图形实例分别指定某个属性，例如：
            appearance: new Cesium.PerInstanceColorAppearance()
        }));
        console.timeEnd('Star')
    },
    methods: {

    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}

.title {
    color: #fff;
}

.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}

.itemBox {
    margin-bottom: 5px;
}
</style>